<template>
  <div class="screen-container">
    <div class="header">
      济南市历下区第一实验幼儿园
    </div>
    <div class="main">
      <div class="main-left">
        <!-- 学校概况 -->
        <dv-border-box-10 class="school">
          <div class="main-content">
            <div class="main-title">
              学校概况
            </div>
            <div class="school-content">
              <a-row type="flex" justify="space-between">
                <a-col class="df ai jc">
                  <dv-decoration-9 class="school-decoration" >
                    <img src="../../assets/largeScreen-img/u46.png" alt="">
                  </dv-decoration-9>
                  <div>
                    <p>教职工</p>
                    <p>96个</p>
                  </div>
                </a-col>
                <a-col class="df ai jc">
                  <dv-decoration-9 class="school-decoration" >
                    <img src="../../assets/largeScreen-img/u47.png" alt=""  style="width:26px;height: 26px;">
                  </dv-decoration-9>
                  <div>
                    <p>学生</p>
                    <p>96个</p>
                  </div>
                </a-col>
                <a-col class="df ai jc">
                  <dv-decoration-9 class="school-decoration" style="">
                    <img src="../../assets/largeScreen-img/u48.png" alt="" >
                  </dv-decoration-9>
                  <div>
                    <p>面积</p>
                    <p>891㎡</p>
                  </div>
                </a-col>
              </a-row>
              <div class="school-msg">
                <p>我园师资队伍具有较高的文化素质和良好的专业素质，思想活跃、积极进取。 教师职称方面，具有高级职称1人，一级教师24人，二级教师31人。骨干教师方面，海淀区学科带头人2人，海淀区骨干教师4人，园级骨干25人。园年龄组长4名，园教研组长4名，园教研员3名，园青年骨干14名。</p>
              </div>
              <div class="school-img df ai jc">
                <a-icon type="left-circle" theme="filled" />
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <img src="" alt="">
                <a-icon type="right-circle" theme="filled" />
              </div>
            </div>
          </div>
        </dv-border-box-10>
        <!-- 幼儿出勤 -->
        <dv-border-box-10 class="out-work">
          <div class="main-content">
            <div class="main-title">
              幼儿出勤
            </div>
            <div class="out-work-content" style="height: 65%;">
              <a-row type="flex" justify="space-between">
                <a-col v-for="(item, index) in list" :key="item.title">
                  <img class="take-notes-img" :src="item.img" alt="" />
                  <span>{{ item.title }}</span>
                  <span class="take-notes-data">{{ item.val }}</span>
                  <span v-show="index != list.length - 1">人</span>
                </a-col>
              </a-row>
              <bar style="margin-top:10px" :barName="barName"
              :barData="barData"
              :color="['#A9F387', '#48D8BF']"
              :barWidth="10"
              :symbolSize="5"
              :width="'100%'"
              :seriesName="'出勤率'"
              :height="'100%'"></bar>
            </div>
          </div>
        </dv-border-box-10>
      </div>
      <div class="main-center">
        <div class="environment">
          <div class="main-content">
            <div class="main-title">
              园区环境
            </div>
            <a-row type="flex" justify="space-between">
              <a-col class="environment-decoration" v-for="item in environmentList" :key="item.title">
                <img class="decoration-bg" src="../../assets/largeScreen-img/u11.svg" alt="">
                <dv-decoration-12 class="decoration-12" style="width:64px;height:64px;" >
                  <img class="decoration-img" :src="item.img" alt="" >
                </dv-decoration-12>
                <p>{{ item.title }}</p>
                <p>{{ item.val }}{{ item.unit }}</p>
              </a-col>
            </a-row>
          </div>
        </div>
        <dv-border-box-1 class="video">
          <div class="main-content">
            <div class="main-title">
              学校教学教研活动展示
            </div>
            <div class="video-box" style="height: 87%;">
              <video src="" controls style="width:100%;height: 100%;"></video>
            </div>
          </div>
        </dv-border-box-1>
      </div>
      <div class="main-right">
        <dv-border-box-10 class="sport">
          <div class="main-content">
            <div class="main-title">
              幼儿运动
            </div>
            <div class="sport-content" style="height: 90%;">
              <line-bar  :width="'100%'" :height="'100%'" :seriesName="['步数','运动量']" :barName="barName" :lineData="lineData" :barData="barData" :color="['#A9F387', '#73DDFF']"></line-bar>
            </div>
          </div>
        </dv-border-box-10>
        <dv-border-box-10 class="area">
          <div class="main-content">
            <div class="main-title">
              活动区域热度对比
            </div>
            <div class="area-tab">
              <ul class="df ai jc">
                <li v-for="(item,index) in tabList" :key="item" @click="tabClick(index)"  :class="index == tabIndex?'area-tab-active':''">{{ item }}</li>
              </ul>
            </div>
            <div class="area-content" style="height: 75%;">
              <dv-scroll-ranking-board v-show="tabIndex == 0" id="u100_div"  :config='info' style="width:100%;height:100%"></dv-scroll-ranking-board >
              <line-chart v-if="tabIndex == 1" :width="'100%'" :height="'100%'" :xData="inDoorXData"  :data="inDoorYData"  :color="['#ff874b','#fe9a8b']"></line-chart>
              <line-chart v-if="tabIndex == 2" :width="'100%'" :height="'100%'" :xData="outDoorXData"  :data="outDoorYData"  :color="['#A9F387','#48D8BF']"></line-chart>
            </div>
          </div>
        </dv-border-box-10>
      </div>
    </div>
    <div class="footer" >
      <dv-border-box-10>
        <div class="main-content">
          <div class="main-title">
            幼儿生活作息
          </div>
          <a-row :gutter="12" style="height: 100%;">
            <a-col :span="4"  style="height: 90%;">
              <p class="footer-title">睡眠</p>
              <trends-pie :width="'100%'" :height="'100%'" :className="'全园'" :data="pieData" ></trends-pie>
            </a-col>
            <a-col :span="6"  style="height: 80%;">
              <bar style="margin-top:40px" :barName="barName"
                :barData="barData"
                :color="['#A9F387', '#48D8BF']"
                :barWidth="10"
                :symbolSize="5"
                :width="'100%'"
                :seriesName="'平均睡眠时长(分钟)'"
                :height="'100%'">
              </bar>
            </a-col>
            <a-col :span="7"  style="height: 85%;">
              <p  class="footer-title">喝水</p>
              <stacked-line :width="'100%'" :height="'100%'" :seriesName="['小班','中班','大班']"  :xData="waterXData" :data="waterYData"   ></stacked-line>
            </a-col>
            <a-col :span="7"  style="height: 85%;">
              <p  class="footer-title">如厕</p>
              <stacked-line :width="'100%'" :height="'100%'" :seriesName="['小班','中班','大班']"  :xData="toiletXData" :data="toiletYData"   ></stacked-line>
            </a-col>
          </a-row>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>
<script>
import Bar from "@/components/Echarts/Bar.vue";
import lineBar from "@/components/Echarts/lineBar.vue";
import lineChart from "@/components/Echarts/line.vue";
import TrendsPie from "@/components/Echarts/TrendsPie.vue";
import StackedLine from "@/components/Echarts/StackedLine.vue";
import u105 from '@/assets/analysis-img/u105.png'
import u106 from '@/assets/analysis-img/u106.png'
import u107 from '@/assets/analysis-img/u107.png'
import u108 from '@/assets/analysis-img/u108.png'
import u94 from '@/assets/analysis-img/u94.png'
import u22 from "@/assets/largeScreen-img/u22.png";
import u23 from "@/assets/largeScreen-img/u23.png";
import u24 from "@/assets/largeScreen-img/u24.png";
import u25 from "@/assets/largeScreen-img/u25.png";
import u26 from "@/assets/largeScreen-img/u26.png";
import u27 from "@/assets/largeScreen-img/u27.png";
import u16 from "@/assets/largeScreen-img/u16.png";
export default {
  name: 'LargeScreen',
  data() {
    return {
      tabList:["室内区域欢迎度","户外区域欢迎度","专业活动室欢迎度"],
      tabIndex:0,
      list: [
        { img: u94, title: '应到', val: '159' },
        { img: u105, title: '实到', val: '159' },
        { img: u106, title: '请假', val: '159' },
        { img: u107, title: '迟到', val: '159' },
        { img: u108, title: '出勤率', val: '159' }
      ],
      environmentList:[
        { img: u25, title: '温度', val: '19' ,unit:"℃"},
        { img: u24, title: '湿度', val: '25' ,unit:"%" },
        { img: u23, title: '二氧化碳', val: '511' ,unit:"PPM" },
        { img: u16, title: '有机化合物', val: '0.65' ,unit:"μg/m³" },
        { img: u22, title: 'PM2.5', val: '26' ,unit:"μg/m³" },
        { img: u26, title: 'PM10', val: '28' ,unit:"μg/m³" },
        { img: u27, title: 'CH2O', val: '53' ,unit:"μg/m³" },
      ],
      pieData:[],
      barName:[],
      barData:[],
      lineData:[],
      inDoorXData:[],
      inDoorYData:[],
      outDoorXData:[],
      outDoorYData:[],
      waterXData:[],
      waterYData:[],
      toiletXData:[],
      toiletYData:[],
      info: {
        data:[
          {
            name: '益智区',
            value: 55
          },
          {
            name: '角色区',
            value: 120
          },
          {
            name: '阅读区',
            value: 78
          },
          {
            name: '建构区',
            value: 66
          },
          {
            name: '科学区',
            value: 80
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
          {
            name: '图书区',
            value: 45
          },
        ],
        rowNum:4
      }
    }
  },
  components: {
    Bar,
    lineBar,
    lineChart,
    TrendsPie,
    StackedLine
  },

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {
    this.barName.push("大一班","大二班","中一班","中二班","小一班","小二班");
    this.barData.push(36,45,42,32,15,63);
    this.lineData.push(36,45,42,32,15,63)
    this.waterXData.push("大一班","大二班","中一班","中二班","小一班","小二班")
    this.waterYData.push(
      [36,45,42,32,15,63],
      [36,14,42,20,15,63],
      [36,56,42,15,15,63]
    )
    this.toiletXData.push("大一班","大二班","中一班","中二班","小一班","小二班")
    this.toiletYData.push(
      [36,45,42,89,15,63],[36,10,42,32,15,63],[36,45,85,32,15,63]
    )
    this.pieData = [
      {
        name: '未戴',
        value: 20
      },
      {
        name: '未睡眠',
        value: 30
      },
      {
        name: '一般',
        value: 10
      },
      {
        name: '良',
        value:15
      },
      {
        name: '差',
        value: 16
      },
      {
        name: '优',
        value: 26
      }
    ];
  },
  
  methods: {
    tabClick(index){
      this.inDoorXData.push("种植区","滑索区","沙滩区");
      this.inDoorYData.push(36,45,42,32,15,63);
      this.outDoorXData.push("美工活动室","机器人活动室","绘本活动室");
      this.outDoorYData.push(36,45,42,32,15,63);
      this.tabIndex = index
    }
  }
}
</script>
<style lang="less">
  .main{
    height: 100%;
  }
  
</style>
<style scoped lang="less">
/* @import url(); 引入css类 */
@imgUrl: '../../assets/largeScreen-img';
.df{
  display: flex;
}
.ai{
  align-items: center;
}
.jc{
  justify-content: space-between;
}
p{
  margin:0;
  padding:0;
}
.screen-container {
  width: 100%;
  height: 100%;
  background: url('@{imgUrl}/u0.png') no-repeat;
  background-size: 100% 100%;
}
.header {
  width: 100%;
  height: 60px;
  color: #fff;
  background: url('@{imgUrl}/u1.png') no-repeat 0 6px;
  background-size: 100% 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
.main {
  color:#C1C1C1;
  display: flex;
  justify-content: space-between;
  height: 58%;
  margin:0 1% 2%;
  &-left,&-right{
    width:30%;
    .school,.out-work,.sport,.area{
      height: 50%;
      margin-bottom: 3%;
      .main-title{
        padding-left: 6%;
        margin-bottom: 10px;
      }
    }
    .school{
      height: 52%;
      margin-bottom: 3%;
      &-decoration{
        width:56px;
        height:56px;
        border:1px solid #21FFF5;
        border-radius: 56px;
        margin-right: 15px;
        img{
          width:22px;height: 22px;
        }
      }
      &-msg{
        p{
          margin:2.2% 0;
          line-height: 25px;
          text-indent: 2em;
          font-size: 12px;
        }
      }
      &-img{
        img{
          width:96px;
          height: 50px;
          background: #fff;
        }
      }
    }
    .out-work-content{
      .take-notes-img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        .take-notes-data {
          color: #33B6A4;
          margin: 0 2px;
        }
    }
    .area{
      .area-tab-active{
        color: #f5f5f5;
        opacity: 1 !important;
      }
      .area-tab{
        ul,li{
          list-style-type: none;
          margin:0;
          padding:0;
        }
        ul {
          li{
            width:30%;
            height: 30px;
            background: url('@{imgUrl}/tab_label_3_u96.svg') no-repeat;
            text-align: center;
            background-size: 100% 100%;
            line-height: 30px;
            cursor: pointer;
            opacity: 0.6;
          }
        }
      }
      /deep/ .area-content{
        .dv-scroll-ranking-board .ranking-column .inside-column{
          height: 8px;
          border-radius: 0 5px 5px 0;
          background: linear-gradient(to right, #3a5dff , #2ec7cf);
          margin: 0;
        }
        .dv-scroll-ranking-board .ranking-column{
          border-bottom: none;
          background: #0f1341;
          border-radius: 4px;
        }
      }
    }
  }
  &-center{
    width:40%;
    margin: 1%;
    .environment{
      height: 35%;
      &-decoration{
        position: relative;
        .decoration-12{
          position: absolute;
          top:0;
        }
        .decoration-img{
          width:32px;
          height: 32px;
        }
        p{
          text-align: center;
        }
      }
    }
    .video{
      height: 72%;
    }
    .main-title{
      padding-left: 5%;
      margin-bottom: 10px;
    }
  }
  &-content {
    height: 100%;
    padding: 2.5% 4%;
  }
  &-title {
    background: url('@{imgUrl}/u28.png') no-repeat 0% 50%;
    color: #21FFF5;
    font-size: 16px;
  }
}
.footer{
  height: 30%;
  margin:0 1%;
  color:#C1C1C1;
  &-title{
    font-size: 16px;
  }
  .main-content{
    padding:1%;
  }
  .main-title{
    padding-left: 1.5%;
  }
}
</style>
